<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Farris公共样式</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./css/themes/default/farris-pub.css" id="themelink" />
    <link href="./css/docs.css" rel="stylesheet" />
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/preset.js"></script>
    <script type="text/javascript" src="./js/docs.js"></script>
</head>

<body>
    <div class="fbdocs-wrapper">
        <header class="fbdocs-wrapper--header">
            <h1 class="fbdocs-title">
                <img src="./imgs/logo.png" />
                <span>Farris公共样式</span>
            </h1>
            <div class="fbdocs-utils-fill fbdocs-utils-flex-row">
                <div class="fbdocs-mode" id="fbdocsMode"></div>
                <div class="fbdocs-select-wrapper" id="fbdocsSelectTheme">
                </div>
            </div>
            <div>
                <div class="fbdocs-search-wrapper">
                    <div class="fbdocs-select-wrapper fbdocsSearchType" id="fbdocsSearchType">
                    </div>
                    <input type="text" class="fbdocs-search" id="searchText" />
                    <span class="clear-search" id="clearSearch"></span>
                    <span class="search-btn" id="searchBtn">搜索</span>
                </div>
            </div>
        </header>
        <div class="fbdocs-wrapper--content">
            <div class="fbdocs-detail-wrapper">
                <h3>使用方式</h3>
                <div>
                        <p>1、可以在html结构中直接使用样式名,比如：&lt;a class="fd-border-action-01"&gt;测试&lt;/a&gt;</p>
                        <p>2、可以在自有样式文件中使用变量名自定义样式,比如 a{color:var(----fp-theme-03);}</p>
                    </div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>边线颜色</h3>
                <div class="create-fbdocs-table" data-type="border"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>文本</h3>
                <div class="create-fbdocs-table" data-type="text"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>图标色</h3>
                <div class="create-fbdocs-table" data-type="icon"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>背景色</h3>
                <div class="create-fbdocs-table" data-type="bg"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>语义色-消息</h3>
                <div class="create-fbdocs-table" data-type="info"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>语义色-提交</h3>
                <div class="create-fbdocs-table" data-type="submit"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>语义色-成功</h3>
                <div class="create-fbdocs-table" data-type="success"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>语义色-警告</h3>
                <div class="create-fbdocs-table" data-type="warning"></div>
            </div>
            <div class="fbdocs-detail-wrapper">
                <h3>语义色-消息</h3>
                <div class="create-fbdocs-table" data-type="danger"></div>
            </div>
        </div>
    </div>
</body>

</html>